<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h4>插值表达式语法</h4>
        <p>插值表达式：框架提供的自动化页面数据写入方法,完成数据变量到DOM的元素的填充操作</p>
        <p>+ Vue的插值表达式调用的是Vue自定义的toString方法</p>
        <p>String:{{ msg }}</p>
        <p>Number:{{ num }}</p>
        <p>Date:{{ day }}</p>
        <p>Array:{{ arr }}</p>
        <p>user:{{ user }}</p>
        <!-- null 在比较运算中不会调用类型转换，JS中和null比较结果为true只有 null 和 undefined -->
        <p>null:|{{ arg1 }}|</p>
        <p>undefined:|{{ arg2 }}|</p>
        <p>Function:{{ callback }}</p>
        <p>Stu:{{ stu }}</p>
        <p>Set:{{ set }}</p>
        <!-- vue的插值表达式不能渲染字符串标签到页面中 -->
        <p>dom:{{ dom }}</p>
        <p>domStr:{{ domStr }}</p>
    </div>

    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        class Stu {
            constructor(name){
                this.name = name;
            }
            toString(){
                return "我的名字是"+this.name
            }
        }

        let vm = createApp({
            data(){
                return {
                    msg:"msg变量",
                    num:100,
                    day:new Date(),
                    arr:[1,2,3,4,5,6],
                    user:{
                        name:"tom",
                        age:23
                    },
                    set:new Set([11,22,33,44,55]),
                    arg1:null,
                    arg2:undefined,
                    dom:document.createElement("div"),
                    domStr:"<p>标签字符串</p>",
                    stu:new Stu("jack"),
                    callback:function(){}
                }
            }
        }).mount("#app")

        // console.log(vm)
    </script>
</body>
</html>